<!--
 * @Description: 审批弹窗
 * @Author: chenju
 * @Date: 2022-03-22 16:17:19
 * @LastEditors: qingyang
 * @LastEditTime: 2022-11-14 16:33:25
-->
<template>
  <CDialog
    :title="props.title"
    size="large"
    v-model:visible="dialogVisible"
    @confirm="dialogVisible = false"
    :showCancelButton="false"
    confirm-text="关闭"
  >
    <div class="active-data-container" v-if="visible" v-loading="loading">
      <CTable use-data-source :data-source="dataList" :pagination="false">
        <vxe-column
          title="组织名称"
          field="organizationName"
          min-width="120"
          show-header-overflow="tooltip"
          show-overflow="tooltip"
        >
          <template #default="scope">
            <CLink
              @click="handleViewDetail(scope.row)"
              v-if="scope.row.fillTaskStatus === FillInTaskStatusEnum.PASS"
              >{{ empty(scope.row.organizationName) }}</CLink
            >
            <template v-else>{{ empty(scope.row.organizationName) }}</template>
          </template>
        </vxe-column>
        <vxe-column
          title="数据周期"
          field="fillPeriod"
          width="100"
          show-header-overflow="tooltip"
          show-overflow="tooltip"
        >
          <template #default="scope">
            {{ empty(scope.row.fillPeriod) }}
          </template>
        </vxe-column>
        <vxe-column
          title="任务下发时间"
          field="taskIssueTime"
          width="190"
          show-header-overflow="tooltip"
          show-overflow="tooltip"
        >
          <template #default="scope">
            {{ empty(scope.row.taskIssueTime) }}
          </template>
        </vxe-column>
        <vxe-column
          title="更新时间"
          field="updateTime"
          width="180"
          show-header-overflow="tooltip"
          show-overflow="tooltip"
        >
          <template #default="scope">
            {{ empty(scope.row.updateTime) }}
          </template>
        </vxe-column>
        <vxe-column
          title="填报状态"
          field="fillTaskStatusName"
          width="100"
          show-header-overflow="tooltip"
          show-overflow="tooltip"
        >
          <template #default="scope">
            <el-tag :type="renderColor(scope.row.fillTaskStatus)">{{
              scope.row.fillTaskStatus
                ? FillInTaskStatusMap[scope.row.fillTaskStatus as keyof typeof FillInTaskStatusEnum]
                : '-'
            }}</el-tag>
          </template>
        </vxe-column>
      </CTable>
    </div>
    <ActiveDataDetailDrawer
      v-model:visible="detailVisible"
      :task-no="detailTaskNo"
    ></ActiveDataDetailDrawer>
  </CDialog>
</template>
<script lang="ts">
export default {
  name: 'ActiveDataDialog'
};
</script>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed, ref, watch } from 'vue';
import { CDialog } from '@/components/CDialog';
import { CTable } from '@/components/CTable';
import ActiveDataDetailDrawer from '../ActiveDataDetailDrawer/index.vue';
import { empty, formatTaskInventoryYearName } from '@/utils';
import { getTaskListMatch } from '@/apis/eci/emissionAccounting/inventoryTask';
import type { GetTaskListMatchResult } from '@/apis/eci/emissionAccounting/model/inventoryTaskModel';
import { FillInTaskStatusMap, FillInTaskStatusEnum } from '@/constants/enum';
import { CLink } from '@/components/CLink/index';

// 入参及格式
interface ActiveDataDialogProps {
  // 弹窗状态
  visible: boolean;
  // 任务编号
  taskNo: string;
  // 标题
  title: string;
}
const props = withDefaults(defineProps<ActiveDataDialogProps>(), {});
const emit = defineEmits(['update:visible']);
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
watch(
  () => dialogVisible.value,
  visible => {
    if (visible) {
      getData();
    }
  }
);
const loading = ref(false);
const dataList = ref<GetTaskListMatchResult[]>([]);
// 初始化
async function getData() {
  loading.value = true;
  try {
    dataList.value = await getTaskListMatch(props.taskNo);
    loading.value = false;
  } catch (error) {
    console.log('error', error);
    dataList.value = [];
    loading.value = false;
  }
}

const renderColor = (status: keyof typeof FillInTaskStatusEnum) => {
  switch (status) {
    case FillInTaskStatusEnum.PASS:
      return 'success';
    case FillInTaskStatusEnum.REJECT:
      return 'danger';
    case FillInTaskStatusEnum.FILLING:
      return '';
    case FillInTaskStatusEnum.WAIT_AUDIT:
      return 'warning';
    default:
      return 'info';
  }
};

const detailVisible = ref(false);
const detailTaskNo = ref('');

function handleViewDetail(row: GetTaskListMatchResult) {
  detailVisible.value = true;
  detailTaskNo.value = row.fillTaskNo;
}
</script>
